<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@include file="./header.jsp" %>

<head>
	<style>
		.model-title{
			line-height:30px;
			height:30px;
			margin-top:0px;
			padding-left:10px;
			background: #eee;
			color:#333;
		}
		
		.total{
			margin-top: 10px;
			padding: 5px;
			background: #F7F7F7;
			color:#666;
		}
		
		.goodsbox:hover{
			border:1px #ff5500 solid;
		}
	</style>
</head>

<body>
	<tags:top/>
    <div class="container" style="margin-top:40px;">
		<div class="row">
			<div class="col-sm-9 col-md-9">
				<div class="row">
					<div class="col-sm-4 col-md-6">
						<span class="glyphicon glyphicon-ok" style="color:#7ABD54;font-size:36px"></span>
						<span style="color:#7ABD54;font-size:24px;margin-left:15px;">商品已成功加入购物车</span>
					</div>
					
					<div class="col-sm-7 col-md-5">
						<a type="button" id="register_btn" class="btn btn-lg btn-def" href="${ctx }/">继续购物</a>
		    			<a type="button" id="register_btn" class="btn btn-lg btn-buy" href="${ctx }/cart" style="font-weight:bold;">去购物车结算></a>	
					</div>
					
				</div>
				
				<div class="row" style="border:1px solid #ccc;margin-top:60px;">
					<div>
						<h5 class="model-title">购买了该商品的用户还购买了</h5>
					</div>
					<div id="shop_recommend_id">
						<!-- col1 -->
					    <div class="col-sm-3 col-md-3" id="col_id0">
							    	
				  		</div>
				  		
				  		<!-- col2 -->
				  		<div class="col-sm-3 col-md-3" id="col_id1">
							    	
				  		</div>
				  		
				  		<!-- col3 -->
				  		<div class="col-sm-3 col-md-3" id="col_id2">
							    	
				  		</div>
				  		
			  			<!-- col4 -->
				  		<div class="col-sm-3 col-md-3" id="col_id3">
							    	
				  		</div>
				  	
					</div>
				</div>
				
				<!-- begin model -->
				<div class="thumbnail goodsbox" style="display: none;" id="goods_recommend_model">
				      <a href="#" target="_blank" class="title-a" style="text-decoration: none;"><h6 class="title ellipsis" style="color:#666;"></h6></a>
				      <a href="#"  target="_blank" class="img-a"><img alt="" src="${ctx }/images/loading.gif"></a>
				      <div class="caption">
				        
				        <p>
				        	<strong class="nowprice" style="color:#F76120;font-size:16px;"></strong>
				        	<span class="oldprice" style="color:#9F9F9F;font-size:14px;text-decoration:line-through;"></span>
				        </p>
				      </div>
				</div>
				<!-- end model -->
					   
			</div>
			
			<div class="col-sm-2 col-md-2 col-md-offset-1 col-sm-offset-1" style="border:1px solid #ccc;">
				<div class="row">
				<h4 class="model-title">我的购物车</h4>
				
				<div class="now-add">
					<h6 style="padding:5px;">刚加入购物车商品</h6>
					<div class="thumbnail now-addcart" style="border:none;">
							
				      <img alt="" src="">
				      <div class="caption">
				        <h6 style="color:#333;"><a href="#" class="title" style="color:#333;"></a></h6>
				        <p>
				        	<strong class="nowprice" style="color:#F76120;font-size:16px;"></strong>
				        	<span class="num"></span>
				        </p>
				       
				      </div>
					</div>
				</div>
				
				<div class="other-add" style="display: none;">
					<h6 style="padding:5px;">您购物车中的其他商品</h6>
					<div class="thumbnail other-cart" style="border:none;">
							
				      <img alt="" src="">
				      <div class="caption">
				        <h6 style="color:#333;"><a href="#" class="title" style="color:#333;"></a></h6>
				        <p>
				        	<strong class="nowprice" style="color:#F76120;font-size:16px;"></strong>
				        	<span class="num">×1</span>
				        </p>
				       
				      </div>
					</div>
				</div>
				
				<div class="total" style="padding-left:5px;">
					共<strong id="skuCount" style="color:#ff5500;">12</strong>件商品<br>
					金额总计：<strong id="totalPrice_id" style="color:#ff5500;">733.40</strong>
				</div>
				
				<div style="margin-top:10px;margin-bottom:10px;padding-left:5px;">
	    			<a type="button" class="btn btn-buy" href="${ctx }/cart" style="font-weight:bold;">去购物车结算></a>	
				</div>
				
			</div>
	
		</div>
					
		</div>		    
  	</div>
	
	<tags:bottom/>
	<script>
		$(function(){
			 //设置刚加入购物车信息
			  var id = "${id}";
			  jQuery.ajax({
					type : 'Get',
					contentType : 'application/json',
					url : '${ctx}/goods/get.do',
					async:false,
					data : {
						id : id,
					},
					dataType : 'json',
					success : function(data) {
						if(data.result){
							var obj = data.obj;
							var goods = obj.goods;
							if("${lastCarts.pic}".indexOf("http") != -1){  
								$(".now-addcart img").attr("src","${lastCarts.pic}");  
							}else{
								$(".now-addcart img").attr("src","${ctx }/upload/download.do?fileName=${lastCarts.pic}");
							}
							$(".now-addcart img").attr("alt",goods.title);
							$(".now-addcart .title").html(goods.title).attr("href","${ctx}/detailGoods/"+goods.id);
							$(".now-addcart .num").html("×${lastCarts.num}");
							$(".now-addcart .nowprice").html("￥"+goods.nowPrice);  
						}
					}
			  });
			  
			  
			 
			  //设置购物车其他信息
			  jQuery.ajax({
					type : 'Get',
					contentType : 'application/json',
					url : '${ctx}/cart/getCartList.do',
					async:false,
					dataType : 'json',
					success : function(data) {
						var cartList = data.obj;
						if(cartList){
							for(var i=0 ;i<cartList.length;i++){
								var goods = cartList[i].goods;
								if(goods.id != id){
									var num = cartList[i].num;
									var pic = cartList[i].pic;
									if(pic.indexOf("http") != -1){
										$(".other-cart img").attr("src",pic);
									}else{
										$(".other-cart img").attr("src","${ctx }/upload/download.do?fileName="+pic);
									}
									
									$(".other-cart img").attr("alt",goods.title);
									$(".other-cart .title").html(goods.title).attr("href","${ctx}/detailGoods/"+goods.id);
									$(".other-cart .num").html("×"+num);
									$(".other-cart .nowprice").html("￥"+goods.nowPrice);  
									$(".other-add").show();
									break;
								}
							
								
							}
							
							calTotalPrice(cartList);
							
							
						}else{
							alert("购物车为空！");
						}
						
					}
				});
			  
			  //计算购物车总数量和总价格
			  function calTotalPrice(cartList){
				  $("#skuCount").html(cartList.length);
				  var totalPrice = 0;
				  for(var i=0;i<cartList.length;i++){
					  var goods = cartList[i].goods;
					  var num = cartList[i].num;
					  for(var n = 0;n<num;n++){
						  totalPrice = totalPrice +goods.nowPrice;
					  }		  
				  }
				  $("#totalPrice_id").html("￥"+totalPrice);
			  }
			  
			//设置购买了该商品的用户还购买了
			  (function(){
				   var currP =Math.floor(Math.random()*11)+1;
			        $.get("${ctx}/goods/goodsListByGrade.do?pageSize=12&grade=1&currPage="+currP, function(data){
			        	
			        	var dataObj = $.parseJSON(data);
			        	
			        	var list = dataObj.obj.goodsList;
			        	for(var i = 0 ;i<list.length;i++){
			        		var model = $("#goods_recommend_model").clone();
			        		var goods = list[i];
			        		var price = goods.price;
							$("#shop_recommend_id #col_id"+i%4).append(model);
							var picURL = "";
							if(goods.picName.indexOf("http") != -1){
								picURL = goods.picName;
							}else{
								picURL = "${ctx}/upload/downloadCompress.do?fileName="+goods.picName;
							}
							if(i<5){
								model.find("img").attr("src",picURL).attr("title",goods.title).attr("alt",goods.title);
							}else{
								model.find("img").attr("data-url",picURL).attr("title",goods.title).attr("alt",goods.title);	
							}
			            	
			            	model.find(".title").html(goods.title);
			            	model.find(".img-a,.btn-buy,.title-a").attr("href","${ctx}/detailGoods/"+goods.id);
			            	model.find(".nowprice").html("￥"+goods.nowPrice);
			            	model.find(".oldprice").html("￥"+price);
			            	model.show();
			        	}
			        	$("#shop_recommend_id img").scrollLoading();

			        });	
					
				})();
			  
		});
	</script>
	
</body>